<template>
  <div>
    <el-dialog @open="openDialog" :title="titleFont" class="tableDialog" width="1200px" :visible.sync="dialogVisible"
               :close-on-click-modal="false">
      <el-tabs class="tabHead" v-model="taskSelectedTab" v-if="procInsId">
        <el-tab-pane key="7" label="数量调整" name="number" v-if="titleFont=='业务详情'||titleFont=='数量调整'">
          <BusinessAdjustDialog ref="BusinessAdjustDialog"></BusinessAdjustDialog>
        </el-tab-pane>
        <el-tab-pane key="8" label="流程图" v-if="titleFont=='业务详情'||titleFont=='数量调整'" name="prodress">
          <el-card class="box-card" shadow="hover">
            <flow-chart ref="chart1" v-if="procInsId" :processInstanceId="procInsId"/>
          </el-card>
        </el-tab-pane>
        <el-tab-pane class="record" key="9" label="流转记录" v-if="titleFont=='业务详情'||titleFont=='数量调整'" name="form-forth">
          <el-card class="box-card" shadow="hover" style="margin-top: 5px">
            <el-steps :active="histoicFlowList.length">
              <el-step
                  :key="index"
                  v-for="(act, index) in histoicFlowList"
                  :title="act.histIns.activityName"
                  finish-status="success"
                  :description="
                  (act.assigneeName || '') +
                  '    ' +
                  moment(act.histIns.endTime).format('YYYY-MM-DD HH:mm:ss')
                "
              ></el-step>
            </el-steps>
            <el-table border :data="histoicFlowList" style="width: 100%;margin-top: 10px">
              <el-table-column
                  prop="histIns.activityName"
                  label="执行环节"
                  min-width="120"
              >
              </el-table-column>
              <el-table-column prop="assigneeName" label="执行人" min-width="100">
                <template slot-scope="scope">
                  {{ scope.row.assigneeName | noValue }}
                </template>
              </el-table-column>
              <el-table-column prop="histIns.startTime" label="开始时间" min-width="170">
                <template slot-scope="scope">
                  {{ scope.row.histIns.startTime | formatDate }}
                </template>
              </el-table-column>
              <el-table-column prop="histIns.endTime" label="结束时间" min-width="170">
                <template slot-scope="scope">
                  {{ scope.row.histIns.endTime | formatDate }}
                </template>
              </el-table-column>
              <el-table-column prop="comment" label="审批意见" min-width="120">
                <template slot-scope="scope">
                  {{ scope.row.comment | noValue }}
                </template>
              </el-table-column>
              <el-table-column prop="durationTime" label="任务历时">
                <template slot-scope="scope">
                  {{ scope.row.durationTime || "0秒" }}
                </template>
              </el-table-column>
            </el-table>
          </el-card>
        </el-tab-pane>
      </el-tabs>

      <div style="margin-top:20px" v-else>
        <BusinessAdjustDialog ref="BusinessAdjustDialog"></BusinessAdjustDialog>
      </div>

    </el-dialog>
  </div>
</template>
<script>
import BusinessLossDialog from './businessLossDialog.vue'
import BusinessInfoDialog from './businessInfoDialog.vue'
import BusinessDeductDialog from './businessDeductDialog.vue'
import BusinessAdjustDialog from './businessAdjustDialog.vue'
import BusinessProductInfo from './businessProductInfo.vue'
import BusinessProductQuatityIndex from './businessProductQuatityIndex.vue'
import BusinessWeightTemplate from './businessWeightTemplate.vue'

export default {
  components: {
    BusinessInfoDialog, // 业务基本信息
    BusinessDeductDialog, // 扣重设置
    BusinessAdjustDialog, // 数量调整
    BusinessProductInfo, // 货物明细
    BusinessWeightTemplate, // 磅单设置
    BusinessProductQuatityIndex, // 质量要求
    BusinessLossDialog // 路耗设置
  },
  props: {
    procInsId: {
      type: String,
      required: true
    }
  },

  data () {
    return {
      procInsId1: '',
      title: '<span style="font-size:20px"></span>',
      titleFont: '',
      businessId: '',
      modelId: '',
      tableData: [],
      loading: false,
      dialogVisible: false,
      inputName: '',
      histoicFlowList: [],
      data: [],
      taskSelectedTab: 'deuctSeting',
      page: {
        pageSize: 10,
        pageNo: 1,
        total: 20
      }
    }
  },
  watch: {
    procInsId (newV, oldV) {
      this.procInsId1 = newV
    },
    taskSelectedTab (val) {
      if (val === 'prodress') {
        if (this.procInsId) {
          this.$refs.chart1.init()
        }
      }
    }
  },
  methods: {
    init (title) {
      this.titleFont = title
      this.dialogVisible = true
      this.businessId = this.$parent.businessId
      this.modelId = this.$parent.modelId
      this.$nextTick(() => {
        this.$refs.BusinessAdjustDialog.businessId = this.businessId
        this.$http
            .get(`/flowable/task/histoicFlowList?procInsId=${this.procInsId}`)
            .then(({data}) => {
              this.histoicFlowList = data.histoicFlowList
            })
      })
    },
    handleCurrentChange (e) {
      this.page.pageNo = e
      this.getCompanyList(this.page)
    },
    add () {
      this.$refs.editInfoDrawer.init('add')
    },

    openDialog () {
      this.$nextTick(() => {
        if (this.titleFont === '业务详情') {
          this.taskSelectedTab = 'baseInfo'
          // 调用业务基本信息
          this.$refs['BusinessInfoDialog'].getInfo(this.businessId)
          // 货物明细：左侧货物菜单数据
          this.$refs['BusinessProductInfo'].getProductList(this.businessId)
          // 数量调整列表
          this.$refs['BusinessAdjustDialog'].getList(this.businessId)
        } else if (this.titleFont === '数量调整') {
          this.taskSelectedTab = 'number'
        } else {
          this.taskSelectedTab = 'deuctSeting'
        }
        // 路耗列表
        this.$refs['BusinessLossDialog'].getLossList(this.businessId, this.modelId)
        // 扣重列表
        this.$refs['BusinessDeductDialog'].getList(this.businessId, this.modelId)

        // 质量要求：左侧货物菜单数据
        this.$refs['BusinessProductQuatityIndex'].getProductQuatityIndexList(this.businessId)
        // 磅单设置: 获取模版select
        this.$refs['BusinessWeightTemplate'].getList(this.businessId, this.modelId)
      })
    },
    tableRowClassName ({
                        row,
                        rowIndex
                      }) {
      if (rowIndex % 2 === 1) {
        return 'warning-row'
      } else {
        return 'success-row'
      }
    },
    handleClose (done) {
      done()
    },
    close () {
    },
    doSubmit () {
    }
  }
}
</script>
<style lang="scss" scoped>
::v-deep.tableDialog.el-dialog__wrapper {
  .el-dialog__body {
    padding-top: 0 !important;
  }
}

::v-deep.tabHead {
  .el-tabs__header {
    margin-bottom: 20px;

    .el-tabs__item {
      font-size: 16px;
      padding: 0 10px;
    }
  }

  .el-tabs__content {
    height: 462px;
    overflow: auto;
  }
}
</style>
